<template>
  <view class="top-tab-components">
    <view
      class="tab-item"
      :class="activeTab == item.code ? 'active' : ''"
      v-for="item in topTabList"
      :key="item.code"
      @click="activeTabFn(item.code)"
      >{{ item.title }}
      <view class="slider-style" v-if="activeTab == item.code"></view>
    </view>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "",
  props: {
    topTabList: {
      type: Array,
      default: () => {
        return [
          {
            title: "2折",
            code: "1",
          },
          {
            title: "女装",
            code: "2",
          },
          {
            title: "男装",
            code: "3",
          },
          {
            title: "鞋包",
            code: "4",
          },
          {
            title: "美妆",
            code: "5",
          },
          {
            title: "运动",
            code: "6",
          },
        ];
      },
    },
  },
  components: {},
  setup() {
    const data = reactive({
      activeTab: "1",
    });
    const activeTabFn = (code) => {
      data.activeTab = code;
    };
    return {
      activeTabFn,
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.top-tab-components {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .tab-item {
    flex: 1;
    padding: 20rpx 0;
    text-align: center;
    position: relative;
    font-size: 26rpx;
    &.active {
      font-size: 32rpx;
      font-weight: 700;
    }
    .slider-style {
      position: absolute;
      color: #5c5c5c;
      background: #ff0777;
      height: 8rpx;
      width: 50rpx;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 4rpx;
    }
  }
}
</style>
